<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="../../../static/css/font.css">
	<link rel="stylesheet" href="../../../static/css/xadmin.css">
	<script type="text/javascript" charset="utf-8" src="../../../demo/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../../demo/ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8" src="../../../static/js/jquery-1.11.1.min.js"></script>
	<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
	<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
	<script type="text/javascript" charset="utf-8" src="../../../demo/lang/zh-cn/zh-cn.js"></script>
	<script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
	
	<style type="text/css">
		div{
			width:900px;
		}
		form{
			margin-top: 20px;
		}
		.layui-upload-img{
			position: absolute;
			top: 20px;
			left: 550px;
			height: 200px; width: 200px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
<form class="layui-form">
	<!--action="{:url('goods/add')}"-->
	<div class="layui-form-item">
		<label class="layui-form-label">产品名</label>
		<div class="layui-input-block">
			<input type="text" name="goods_name" style="width: 370px;" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<!--<div class="layui-input-block">-->
			<!--<button type="button" class="layui-btn" id="test1">-->
				<!--<i class="layui-icon">&#xe67c;</i>上传图片-->
			<!--</button>-->
		<!--</div>-->
		<div class="layui-upload">
			<button type="button" class="layui-btn" id="test1">上传图片</button>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">产品价格</label>
		<div class="layui-input-inline">
			<input type="text" name="money" required lay-verify="required" style="width: 370px;" placeholder="$$$" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">是否上架</label>
		<div class="layui-input-block">
			<input type="checkbox" name="switch" lay-skin="switch">
		</div>
	</div>
		<div class="layui-upload-list abc">
			<img class="layui-upload-img" name="image" id="demo1">
			<input type="text" style="display: none" name="ima" class="image_t">
			<p id="demoText"></p>
		</div>
	<div class="layui-form-item">
		<label class="layui-form-label">产品类型</label>
		<div class="layui-input-block">
			<select name="goods_type" style="width: 30%" lay-verify="required">
				<option value=""></option>
				{foreach $goods_type as $v}
					<option value="{$v.id}">{$v.type_name}</option>
				{/foreach}
			</select>
		</div>
	</div>
	
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">标注:</label>
		<div class="layui-input-block">
			<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<script>
	$(function () {
	var images;

	layui.use('upload', function(){
		var $ = layui.jquery
			,upload = layui.upload;
		
		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test1'
			,url: "{:url('goods/upload')}"
			,before: function(obj){
				obj.preview(function(index, file, result){
//					$('#demo1').attr('src', result); //图片链接（base64）
//					console.log(result)
				});
			}
			,done: function(res,index,upload){
				images=res.image;
				console.log(res.image);
				var img = res.image
				$('.image_t').value=img
					$("#demo1").attr({src:img});
				//如果上传失败
//				if(res.code > 0){
//					return layer.msg('上传失败');
//				}
				//上传成功
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		})
	});
	
//	$(function () {
		layui.use('form', function(){
		var form = layui.form;
		
		//监听提交
		form.on('submit(formDemo)', function(data){
//			console.log(data.field)
			data.field.ima=images;//存入新的字段
//			console.log(data.field);
//			console.log(images)
			$.post('add',data.field,function (result) {
				console.log(result.status)
//				if(result.status=true){
//					return layer.msg('上传成功');
//				}
			})
//			layer.msg(JSON.stringify(data.field));
//			return false;
		});
	});
	})
//	})
</script>
</body>
</html>